<template>
  <div class="h5-live-classroom">
    <!-- 顶部导航 -->
    <h5-header
      :title="roomInfo.title"
      :online-count="onlineCount"
      @back="handleBack"
    />

    <!-- 视频播放区 -->
    <h5-video-player
      :teacher-name="roomInfo.teacherName"
      :teacher-avatar="roomInfo.teacherAvatar"
      ref="videoPlayer"
    />

    <!-- 标签页控制 -->
    <h5-tab-control
      v-model="activeTab"
      :tabs="[
        { name: 'participants', label: `成员 (${students.length + 1})` },
        { name: 'chat', label: '聊天' },
      ]"
    />

    <!-- 内容区域 -->
    <div class="content-area">
      <!-- 参会者列表 -->
      <h5-participants-list
        v-show="activeTab === 'participants'"
        :teacher="roomInfo"
        :students="students"
      />

      <!-- 聊天区域 -->
      <h5-chat-section
        v-show="activeTab === 'chat'"
        :messages="messages"
        @send="handleSendMessage"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import H5Header from "./components/H5Header.vue";
import H5VideoPlayer from "./components/H5VideoPlayer.vue";
import H5TabControl from "./components/H5TabControl.vue";
import H5ParticipantsList from "./components/H5ParticipantsList.vue";
import H5ChatSection from "./components/H5ChatSection.vue";

const router = useRouter();
const activeTab = ref("participants");
const videoPlayer = ref(null);

// 生成随机头像
const getRandomAvatar = (seed) => {
  return `https://api.dicebear.com/7.x/avataaars/svg?seed=${seed}`;
};

// 房间信息
const roomInfo = ref({
  id: "room123",
  title: "高级JavaScript编程实战课程",
  teacherName: "张老师",
  teacherAvatar: getRandomAvatar("teacher"),
});

// 在线人数
const onlineCount = ref(42);

// 学生列表
const students = ref([
  {
    id: 1,
    name: "学生1",
    avatar: getRandomAvatar("student1"),
    isSpeaking: false,
  },
  {
    id: 2,
    name: "学生2",
    avatar: getRandomAvatar("student2"),
  },
  {
    id: 3,
    name: "学生3",
    avatar: getRandomAvatar("student3"),
  },
]);

// 聊天消息
const messages = ref([
  {
    id: 1,
    sender: "学生1",
    content: "老师，这个知识点能再讲详细一点吗？",
    avatar: getRandomAvatar("student1"),
  },
  {
    id: 2,
    sender: "张老师",
    content: "好的，我再详细讲解一下这部分内容",
    avatar: roomInfo.value.teacherAvatar,
  },
]);

// 处理发送消息
const handleSendMessage = (content) => {
  messages.value.push({
    id: Date.now(),
    sender: "我",
    content,
    avatar: getRandomAvatar("me"),
  });
};

// 返回上一页
const handleBack = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.h5-live-classroom {
  min-height: 100vh;
  height: 100vh;
  background: #0a0b1a;
  color: #fff;
  display: flex;
  flex-direction: column;

  .content-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .h5-participants,
    .h5-chat {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
